<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <!--指定浏览器-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%">
    </div>
    <!--存储Base64，以便需要保存到本地-->
    <input id="txtImage" type="text" style="display: none" />
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
    <script type="text/javascript">

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

        // 等待从外面获取相关参数
        var pBatchId = 0;
        var pBoolId = 0;
        var pProjectToolInstanceId = 0;
        var pMetaIds = new Array();
        var pPage = 0;
        var pSize = 0;
        var pSort = "desc";

        var url = location.search; //获取url中"?“符后的字串
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            var data = decodeURIComponent(strs[0].replace("data=", ""));//获取url中的data
            datas = data.split(",");
        };

        NetRequest(pBatchId, pBoolId, pProjectToolInstanceId, pMetaIds, pPage, pSize, pSort);

        function NetRequest(batchId, toolId, projectToolInstanceId, metaIds, page, size, sort) {

            //这里为等待loading效果显示
            myChart.showLoading({
                text: '数据正在加载...',
                textStyle: { fontSize: 30, color: '#444' },
                effectOption: { backgroundColor: 'rgba(0, 0, 0, 0)' }
            });

            //请求后台数据
            $.ajax({
                type: "get",
                url: "http://47.92.245.238:9005/api/XG/Xg_Patient/XgPatientSample/PCGet/xysy,0,2021-01-01,2021-04-01,-1,0,0,1,10,0,asc,03b8f8a9c43f92c238808c7717b000015a36f8f4",
                async: true,
                success: function (data) {
                    // alert(data.Code);
                    //这里需要开始解析数据，数据内容可以根据meta.js 和后台开发说明进行解析。

                    //此处为后端返回过来的2个结果 category，value 演示
                    var myCategoryData = new Array('Mon1', 'Tue2', 'Wed3', 'Thu', 'Fri', 'Sat', 'Sun');
                    var myValue1 = new Array(120, 20, 150, 80, 70, 110, 130);
                    var myValue2 = new Array(50, 20, 40, 90, 70, 110, 130);

                    var option;

                    option = {
                        // 曲线颜色设置
                        color: ['#333366', '#99CC33', '#336699', '#999933', '#999999'],
                        toolbox: {
                            right: '2%',
                            bottom: '5%',
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: 1048, name: '搜索引擎' },
                                    { value: 735, name: '直接访问' },
                                    { value: 580, name: '邮件营销' },
                                    { value: 484, name: '联盟广告' },
                                    { value: 300, name: '视频广告' }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                
                    // 动态增加曲线 测试
                    var item2 = {
                        data: myValue2,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    };
                 //   option.series.push(item2);
                  //  option.series.push(item2);
                //    option.series.push(item2);
                 //   option.series.push(item2);

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }

                    //隐藏loading登陆效果
                    myChart.hideLoading();

                    //赋值 将图片保存在本地控件里面
                    var i = myChart.getDataURL({
                        type: 'png',
                        backgroundColor: 'white'
                    });
                    document.getElementById('txtImage').value = i;
                }, error: function (data) {
                    //异常处理
                    //显示data的结构 调试用,正式使用时可以关闭
                    var ob = eval(data);
                    var property = "";
                    for (var p in ob) {
                        property += p + "\n";
                    }
                    alert('错误码：' + data.status);
                }
            });
        }

        

    </script>
</body>
</html>
